<template>
	<view class="container" :style="{backgroundImage:'url('+backthumb+')'}">
		<backbtn/>
		<view :class="[{'scene animated':true},{'slideOutLeft': scene !== 0}]">
			
		</view>
		<view class="scene" v-if="scene == 1">
			<music :music="musicSrc" />
			<view class="center">
				<z-swiper v-model="list" :options="optionsAutoplay" style="z-index: 2;">
					<z-swiper-item :custom-style="{width:'500rpx'}" v-for="(item,index) in list" :key="index">
						<img :src="item" alt="" mode="widthFix">
					</z-swiper-item>
				</z-swiper>
			</view>
			<footerPart />
		</view>
	</view>
</template>

<script>
	import backbtn from '@/components/backbtn.vue'
	import music from '@/components/music.vue'
	import footerPart from '@/components/footer.vue'
	export default {
		components: {
			backbtn,
			music,
			footerPart
		},
		data() {
			return {
				fadeOutAnimation: {},
				detail: {},
				index: 0,
				scene: 0,
				backthumb: '',
				foreground: '',
				musicSrc: '',
				list: [],
				optionsAutoplay: {
					effect: 'coverflow',
					centeredSlides: true,
					slidesPerView: 'auto',
					speed: 1000,
					coverflowEffect: {
						rotate: 50,
						stretch: 20,
						depth: 100,
						modifier: 1,
						slideShadows: true,
					},
					autoplay: true
				},
				currentIndex: 0,
				currentImage: '',
				currentClass: 'animated fadeInDown',
				pages: [],
				isplaying: true,
				from: 'list',
				ano: '',
				imgUrl: '',
				canvasshow: false,
				timeslotavatar: [],
				appheight: '',
				autoplay: false,
				interval: 0,
				duration: 600,
				cur: 0,
				nickname: '朋友',
				avatar: '',
				buttontext: '定制自己的个性祝福',
			}
		},
		onReady() {
			uni.hideTabBar();
		},
		onLoad(options) {
			const that = this;
			let optionsA = {
				'templateid': 2,
				'showano': 'de46f70da2d43962fbdf7ac4084fba7d', //
				'ano': 'hzheBp520'
			}
			this.getalbum(optionsA);
			this.fadeOutAnimationFunc();
			setTimeout(() => {
				that.scene = 1;
			}, 5000);
		},
		methods: {
			fadeOutAnimationFunc() {
				const animation = uni.createAnimation({
					duration: 5000,
					timingFunction: 'ease',
					delay: 0,
				});

				animation.translateX(100).step();
				this.fadeOutAnimation = animation.export();
			},
			back() {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},
			getalbum(options) {
				const that = this;
				const data = {
					'templateid': options.templateid,
					'appid': this.$apis.appId,
					'showano': options.showano, //
					'ano': options.ano
				};
				this.$apis.getalbum(data).then(res => {
					that.list = res.ablums;
					that.detail = res;
					that.detail.templateid = options.templateid;
					that.detail.showano = options.showano;
					wx.hideLoading();
				})
			},
			previewImage(url) {
				// 使用uni的预览图片接口
				uni.previewImage({
					current: 0, // 当前显示图片索引
					urls: [url], // 需要预览的图片http链接列表
				});
			},
		},
		onShareAppMessage: function() {
			const share = this.detail
			let title = decodeURIComponent(this.detail.title);
			const sharepath = '/pages/album/child?templateid=' + share.templateid + '&showano=' + share.showano +
				'&ano=' + share.ano;
			console.log('sharepath', sharepath);
			return {
				title: '快乐的童年',
				path: sharepath,
				imageUrl: share.ablums[0],
				success: function(res) {
					// 转发成功
				},
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import "../album.scss"
</style>